<template>
  <div class="business-trip-info">
    <ul>
      <li><strong>表单类型:</strong> {{ workflowApprovalDetail.workflow_name }}</li>
      <li><strong>申请人:</strong> {{ workflowApprovalDetail.admin_name }}</li>
      <li><strong>表单名:</strong> {{ workflowApprovalDetail.name }}</li>
      <li v-for="(item, key) in workflowApprovalDetail.params" :key="key"><strong>{{ item.name }}</strong> {{ item.value }}</li>
    </ul>
  </div>
  是否通过：<el-switch v-model="pass" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
  备注：<el-input v-model="remark" placeholder="请输入备注"></el-input>
  <el-button type="primary" @click="submit">审批</el-button>
</template>

<script setup>
  import { ref, onMounted } from "vue"
  import {useRoute, useRouter } from "vue-router";
  import http from "../http"

  const route = useRoute()
  const router = useRouter()

  let id = route.query.id

  let workflowApprovalDetail = ref({})

  let pass = ref(false)

  let remark = ref('')

  const getWorkflowApprovalDetail = () => {
    http.get(`workflow/task_retrieve/${id}/`)
    .then(res=>{
      console.log(res)
      workflowApprovalDetail.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const submit = () => {
    if (pass.value) {
      pass.value = 1
    }
    else{
      pass.value = 0
    }
    http.post(`workflow/next_reviewer/`, {message: {task_id: id, audit_status: pass.value, note: remark.value}})
    .then(res=>{
      console.log(res)
      alert("审批成功")
    })
    .catch(error=>{
      console.log(error)
      alert("审批失败")
    })
  }

  onMounted(()=>{
    getWorkflowApprovalDetail()
  })

</script>
